前言：ueditor是百度开源的一款富文本编辑器，还是比较流行的，之前有写过一篇vue后台管理项目中使用froala-editor富文本编辑器教程，froala-editor是一个收费的编辑器，主题皮肤都挺好看的，并且支持v-model,十分的方便，但是想要集成第三方的编辑器就不太行了，比如集成秀米。看个人需求吧，ueditor百度编辑器的默认主题皮肤真心丑，我是看不下去，所以决定换肤！！先上两张对比图～
换肤前换肤后1. 先去ueditor官网按照需求下载image.png2. 下载解压后名字改成UEditor，丢到vue项目中的public目录下（或者static下）image.png3. 安装vue-editor-wrapcnpm i vue-ueditor-wrap -S//引入组件import VueUeditorWrap from 'vue-ueditor-wrap' //es6//注册组件components: {VueUeditorWrap},//template // data msg: '', myConfig: { // 编辑器不自动被内容撑高 autoHeightEnabled: false, // 初始容器高度 initialFrameHeight: 500, // 初始容器宽度 initialFrameWidth: '100%', // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！） serverUrl: 'http://35.201.165.105:8000/controller.php', // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2 UEDITOR_HOME_URL: '/UEditor/'}没有失误的话，是这个样子的。
image.png4. 接下来就是换肤了。换肤也比较简单，就是重写css，在 ueditor.config.js中，把 theme:'default'的注释打开，修改成 theme:'notadd'，然后把准备好的css丢到 public/UEditor/themes下,在public/UEditor/themes/iframe.css中添加
img { max-width: 100%; height: auto;}像这样。
image.pngps:皮肤文件+v 1115009958 索取,不是无偿的，请知悉然后编辑器就变成了这个样子。
image.png5.自定义按钮和弹窗vue-ueditor-wrap v-model="msg" :config='myConfig'>改成vue-ueditor-wrap v-model="msg" :config='myConfig' @ready="ready" @before-init="addCustomButtom">//dataeditor:{},myConfig: {toolbars: [ ['fullscreen',//全屏'source',//源码'undo', //撤销'redo', //前进'bold', //加粗'italic', //斜体'underline', //下划线'strikethrough', //删除线'fontborder', //字符边框'formatmatch', //格式刷// 'fontfamily', //字体'fontsize', //字号'justifyleft', //居左对齐'justifycenter', //居中对齐'justifyright', //居右对齐// 'justifyjustify', //两端对齐'insertorderedlist', //有序列表'insertunorderedlist', //无序列表// 'lineheight',//行间距 ]],// 编辑器不自动被内容撑高autoHeightEnabled: false,// 初始容器高度initialFrameHeight: 500,// 初始容器宽度initialFrameWidth: '100%',// 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）serverUrl: 'http://35.201.165.105:8000/controller.php',// UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2UEDITOR_HOME_URL: '/UEditor/' },//methodsready(editorInstance) // 富文本初始化完成触发 this.editor = editorInstance},// 添加自定义按钮addCustomButtom(editorId) { let _this = this window.UE.registerUI('test-button', function (editor, uiName) {// 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作editor.registerCommand(uiName, { execCommand: function () {let html = ``editor.execCommand('inserthtml', html); }});// 创建一个 buttonvar btn = new window.UE.ui.Button({ // 按钮的名字 name: uiName, // 提示 title: '上传图片', // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2 cssRules: "background-image: url('http://erkong.ybc365.com/2644220200815163758435.png') !important;background-size: cover;", // 点击时执行的命令 onclick: function () {// 这里可以不用执行命令，做你自己的操作也可_this.editor.execCommand('inserthtml', '插入到编辑器的内容'); }});// 当点到编辑内容上时，按钮要做的状态反射editor.addListener('selectionchange', function () { var state = editor.queryCommandState(uiName); if (state === -1) {btn.setDisabled(true);btn.setChecked(false); } else {btn.setDisabled(false);btn.setChecked(state); }});// 因为你是添加 button，所以需要返回这个 buttonreturn btn; }/* 指定添加到工具栏上的哪个位置，默认时追加到最后 */ /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */);},// 添加自定义弹窗addCustomDialog(editorId) { window.UE.registerUI('test-dialog', function (editor, uiName) {// 创建 dialogvar dialog = new window.UE.ui.Dialog({ // 指定弹出层中页面的路径，这里只能支持页面，路径参考常见问题 2 iframeUrl: '/customizeDialogPage.html', // 需要指定当前的编辑器实例 editor: editor, // 指定 dialog 的名字 name: uiName, // dialog 的标题 title: '这是一个自定义的 Dialog 浮层', // 指定 dialog 的外围样式 cssRules: 'width:500px;height:200px;', // 如果给出了 buttons 就代表 dialog 有确定和取消 buttons: [{ className: 'edui-okbutton', label: '确定', onclick: function () {dialog.close(true); }},{ className: 'edui-cancelbutton', label: '取消', onclick: function () {dialog.close(false); }} ]});// 参考上面的自定义按钮var btn = new window.UE.ui.Button({ name: 'dialog-button', title: '打开秀米', cssRules: `background-image: url('/test-dialog.png') !important;background-size: cover;`, onclick: function () {// 渲染dialogdialog.render();dialog.open(); }});return btn; } /* 指定添加到工具栏上的那个位置，默认时追加到最后 */ /* 指定这个UI是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */);},//main.js//引入这两个文件，否则自定义的按钮不出现图标import '../public/UEditor/ueditor.config'import '../public/UEditor/ueditor.all.js'这样就出现了自定义的按钮
image.png在这里你可以写你的逻辑，弹窗同理，就不多说了
image.pngimage.png6.下面开始集成秀米第一步：下载文件 xiumi-ue-dialog-v5.js和xiumi-ue-v5.css和xiumi-ue-dialog-v5.html和 xiumi-ue-internal.js,点这里可以打包下载第二步：将下载的压缩文件解压，把里面的文件丢到UEditor/dialogs里image.png第三步：修改 xiumi-ue-dialog-v5.html，引入 xiumi-ue-internal.jsimage.png第四步：修改ueditor.config.js xssFilterRules: false //本来是true，改成false inputXssFilter: false //本来是true，改成false outputXssFilter: false //本来是true，改成false article: ['style'],//本来是[ ]，改成 ['style'] section: ['class',"style"], //本来是[ ] ，改成 ['class',"style"] img: ['style', 'src', 'alt', 'title', 'width', 'height', 'id', '_src', '_url', 'loadingclass', 'class', 'data-latex','style','word_img'] //后面多加两个值'style','word_img' 还有其他的，看自己需求更改配置第五步： 在main.js中引入基